<template>
  <!-- 订单管理页 -->
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" @click="Waitinglist('1')">所有订单</el-menu-item>
      <el-menu-item index="2" @click="Waitinglist('2')">待支付</el-menu-item>
      <el-menu-item index="3" @click="Waitinglist('3')">待派单</el-menu-item>
      <el-menu-item index="4" @click="Waitinglist('4')">待接单</el-menu-item>
      <el-menu-item index="5" @click="Waitinglist('5')">待服务</el-menu-item>
      <el-menu-item index="6" @click="Waitinglist('6')">待确认</el-menu-item>
      <el-menu-item index="7" @click="Waitinglist('7')">已完成</el-menu-item>
    </el-menu>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="订单编号" align="center">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" align="center">
      </el-table-column>
      <el-table-column prop="total" label="总价" align="center">
        <template slot-scope="scope" style="fontsize: 18px">
          ￥

          <el-button type="text"
            ><input
              type="button"
              :value="scope.row.total"
              style="color: red; fontsize: 18px"
            />
          </el-button>
          元
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == '待派单'"
            style="
              background-color: #e7faf0;
              border-color: #d0f5e0;
              color: #13ce66;
              padding: 3px;
            "
            type="text"
            size="small"
            >待派单</el-button
          >
          <el-button
            v-else-if="(scope.row.status = '待接单')"
            style="
              background-color: #fff8e6;
              border-color: #fff1cc;
              color: #ffba00;
              padding: 3px;
            "
            type="text"
            size="small"
            >待接单</el-button
          >
          <el-button v-else type="text" size="small">待服务</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID" align="center">
      </el-table-column>
      <el-table-column prop="employeeId" label="员工ID" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" prop="status">
        <template slot-scope="scope">
          <el-button @click="details(scope.row)" type="text" size="small">
            详情
          </el-button>
          <el-button
            v-if="scope.row.status == '待派单'"
            @click="
              Orderdelivery(
                scope.row.id,
                scope.row.customerId,
                scope.row.employeeId
              )
            "
            style="color: green"
            type="text"
            size="small"
            >派单</el-button
          >
          <el-button
            v-else-if="(scope.row.status = '待接单')"
            @click="CancelOrderdelivery(scope.row.id)"
            style="color: pink"
            type="text"
            size="small"
            >取消派单</el-button
          >
          <el-button
            v-else
            @click="Orderdelivery(scope.row.id)"
            type="text"
            size="small"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="dialogClose"
    >
        <el-radio-group v-model="radio">
          <el-radio :label="radio1.id" v-for="radio1 in radiodata" :key="radio1.id">{{radio1.username}}</el-radio>
        </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <!-- 提交表单后 调用重置表单的方法 -->
        <el-button
          type="primary"
          @click="submitOrder"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
// 引入文件上传路径 和 文件预览的路径
import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      radiodata: [],
      id: "",
      customerId: "",
      radio: "",
      dialogTitle: "派单",
      dialogVisible: false,
      selectpage: "1",
      tableData: [],
      // 每页要展示的数据条数
      // 页面展示数据的总条数
      total: 10,
      datahh: {
        page: 1,
        pageSize: 8,
      },
    };
  },
  computed: {},
  methods: {
    async radiodataget() {
      let data = {
        page: 1,
        pageSize: 100,
        roleId: 1,
      };
      let res = await get("/baseUser/pageQuery", data);
      this.radiodata = res.data.list;
      console.log(this.radiodata);
    },
    async submitOrder() {
          let res = await get("/order/sendOrder", {waiterId:this.customerId,orderId:this.id});

          // 给用户一个成功的提示
            // 重新刷新页面的数据
            this.getAllorderData();
            // 调用关闭模态框的方法
            this.dialogClose();
      },
    dialogClose() {
      // 重置表单
      // 关闭模态框
      this.dialogVisible = false;
    },
    Orderdelivery(id, customerId, employeeId) {
      this.id = id;
      this.customerId = customerId;
      this.employeeId = employeeId;
      this.dialogVisible = true;
    },
    async CancelOrderdelivery(id) {
      let data = {
        orderId: id,
      };
      let res = await get("/order/cancelSendOrder", data);
      this.getAllorderData();
    },
    Waitinglist(val) {
      this.selectpage = val;
      this.datahh.page = 1;
      this.datahh.pageSize = 8;
      switch (this.selectpage) {
        case "1":
          this.datahh.status = null;
          break;
        case "2":
          this.datahh.status = "待支付";
          break;
        case "3":
          this.datahh.status = "待派单";
          break;
        case "4":
          this.datahh.status = "待接单";
          break;
        case "5":
          this.datahh.status = "待服务";
          break;
        case "6":
          this.datahh.status = "待确认";
          break;
        case "7":
          this.datahh.status = "已完成";
          break;
          break;

        default:
          this.datahh = {
            page: 1,
            pageSize: 8,
            status: "",
          };
          break;
      }
      this.getAllorderData();
    },
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.datahh.pageSize = val;
      // 将当前的页数 重置到第一页
      this.datahh.page = 1;
      // 重新调用获取所有产品数据的方法
      this.getAllorderData();
    },
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.datahh.page = val;
      // 重新调用获取所有产品数据的方法
      this.getAllorderData();
    },

    async getAllorderData() {
      let data = {
        page: this.datahh.page,
        pageSize: this.datahh.pageSize,
        status: this.datahh.status,
      };
            // 获取参数
      // queryData 和 data 结合成一个对象呢？
      // console.log({...data, ...this.queryData});
      // 通过对应的参数发送网络请求 获取产品数组数据
      let res = await get("/order/pageQuery", data);
      // 将data中的产品数组 进行赋值
      this.tableData = res.data.list;
      // 页面总数据条数 赋值
      this.total = res.data.total;
    },
  },
  created() {
    this.radiodataget();
    this.getAllorderData();
  },
  mounted() {},
};
</script>
<style scoped>
</style>